<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>竞赛模式</title>
    <style>
        body {
            background-color: #66ccff;
        }

        .main {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .box {
            width: 1000px;
            height: 600px;
            overflow-y: scroll;
        }

        .box::-webkit-scrollbar {
            display: none;
        }

        .text {
            padding-left: 15px;
            padding-right: 15px;
            height: 50px;
            line-height: 50px;
            font-size: x-large;
            background-color: antiquewhite;
            user-select: none;
            font-family: "黑体", Courier, Monospace;
            font-weight: 100;
        }

        .Sidebar {
            display: flex;
            flex-direction: column;
            margin: 100px 20px 0 10px;
            padding: 10px;
            width: 150px;
            background-color: antiquewhite;
            font-weight: bold;
        }

        .inputText {
            padding-left: 15px;
            padding-right: 15px;
            width: 100%;
            height: 48px;
            font-size: x-large;
            border: none;
            outline: none;
            background-color: white;
            font-family: "黑体", Courier, Monospace;
            font-weight: 100;
        }

        .yes {
            color: rgb(12, 198, 25);
        }

        .no {
            color: white;
            background-color: red;
        }

        .btn {
            background-color: #66ccff;
            width: 100%;
            padding: 10px 20px;
            color: white;
            font-weight: bold;
            font-size: large;
            border: none;
            outline: none;
            cursor: pointer;
        }

        #demo1 {
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 100px;
        }

        p {
            margin: 7px 5px;
            font-family: "黑体", Courier, Monospace;
            font-weight: 100;
        }

        input {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script src="../jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="exercise.js"></script>
</head>

<body>
    <div class="main">
        <div class="box" id="txtHint"></div>
        <div class="Sidebar" id="Sidebar"></div>
    </div>
    <script>
        window.onload = function () {
            var id = location.search.substr(1).split("=")[1];
            $.ajax({
                url: "getCompetiton.php",
                type: "GET",
                data: {
                    id: id
                },
                success(res) {
                    acticle = res["acticle"];
                    limitTime = Number(res["time_limit"]);
                    showTexts(acticle);
                }
            })
        };

        function showTexts(str) {
            $.ajax({
                url: `../acticle/${str}.txt`,
                success: function (data) {
                    current_line = 0;  // 重置输入行数
                    all = data.replace(/[\r\n]/g, "").length;
                    percentage = 1 / all * 100;
                    data = data.split('\n');
                    var strArr = [];
                    var htmlcode = '';
                    for (let i = 0; i < data.length; i++) {
                        for (let j = 0; j < data[i].length; j += 40)
                            strArr.push(data[i].slice(j, j + 40));
                    }
                    for (line = 0; line < strArr.length; line++) {
                        var lineStr = strArr[line].replace(/[\r\n]/g, "");
                        htmlcode += `<div class="text" id="refer${line}">`;
                        for (let j = 0; j < lineStr.length; j++) {
                            htmlcode += `<span id=row${line}&column${j} class="">${lineStr[j]}</span>`;
                        }
                        htmlcode += `</div><input class="inputText" id="${line}" readonly oninput="startTime()">`;
                    }
                    document.getElementById("txtHint").innerHTML = htmlcode;
                    document.getElementById("Sidebar").innerHTML = Sidebar;
                    document.getElementById("0").focus();
                    $("#0").removeAttr("readonly");
                    $("#mode").html("");
                    addAttr(0);
                }
            });
        }

        function finish(wordCount) {
            if ((limitTime && mins == limitTime) || wordCount == all) {
                var countNo = $("#txtHint").html().split('class="no"').length - 1;
                var accuracy = Math.trunc(100 - countNo * percentage);
                var param = {
                    acticle: acticle,
                    wordCount: wordCount,
                    time: $("#time").html(),
                    speed: $("#speed").html(),
                    accuracy: accuracy,
                    id: location.search.substr(1).split("=")[1]
                }
                var params = JSON.stringify(param);
                localStorage.setItem('params', params);
                window.location.replace("../result/result.html");
            }
        }
    </script>
</body>

</html>